<template>
  <div class="dashboard_editor_container">
    <div class="right_con">
      <div class="right_top_con">
        <div class="right_chart_top_con">
          <div>
            <el-button type="primary" @click="doExport">导出</el-button>
          </div>
          <div class="device_info_con">多曲线查看</div>
          <div class="return_con">
            <el-button type="primary" @click="returnFun">返回上一页</el-button>
          </div>
        </div>
      </div>
      <div class="echart_dia_con">
        <div class="alert_main_con">
          <div class="echart_info_main_con">
            <div class="echart_main">
              <multitermlineChart
                :lineChartData="lineChartData"
                :currentEvents="currentEvents"
                :selectLineed="selectLineed"
                :addType="addType"
                ref="multitermlineChart"
              ></multitermlineChart>
            </div>
            <div class="abline_button_con">
              <el-button
                type="primary"
                @click="recoveryRatio"
                :disabled="dataZoomVis"
              >1:1</el-button
              >
              <el-button
                type="primary"
                :disabled="aLineShow"
                @click="showLine('a')"
                round
                ref="aButton"
              >A</el-button
              >
              <el-button
                type="primary"
                :disabled="bLineShow"
                @click="showLine('b')"
                round
                ref="bButton"
              >B</el-button
              >
            </div>
            <div class="echart_info_con">
              <div class="chart_top_info">
                <div
                  :class="
                    infoIndex === 1
                      ? 'top_button_con top_button_select_con'
                      : 'top_button_con '
                  "
                  @click="selectInfoIdx(1)"
                >
                  曲线信息
                </div>
                <div
                  :class="
                    infoIndex === 2
                      ? 'top_button_con top_button_select_con'
                      : 'top_button_con'
                  "
                  @click="selectInfoIdx(2)"
                >
                  曲线列表
                </div>
              </div>
              <!-- 曲线信息 -->
              <transition
                name="fade"
                enter-active-class="animate_enter"
                leave-active-class="animate_leave"
              >
                <div class="chart_main_con" v-if="infoIndex === 1">
                  <div class="circuit_info_title_con">
                    <div class="circuit_info_left">
                      曲线信息
                    </div>
                    <div class="circuit_info_right">
                      {{ curveData[selectLineed].displayName }}
                    </div>
                  </div>
                  <div class="param_con">
                    <div class="param_result_title">
                      测试结果
                    </div>
                    <div class="flex_con">
                      <div class="right_bottom_right">
                        <div class="left_bottom_con">
                          <div class="table_item_big">
                            <div class="table_left_con">
                              全程衰耗 (dB):
                            </div>
                            <div class="table_right_con">
                              {{
                                fixFun(
                                  curveData[selectLineed].wholeAtten,
                                  "blank"
                                )
                              }}
                            </div>
                          </div>
                          <div class="table_item_big">
                            <div class="table_left_con">
                              全程长度:(KM)
                            </div>
                            <div class="table_right_con">
                              {{
                                lengthShowFun(
                                  curveData[selectLineed].wholeLen,
                                  "blank"
                                )
                              }}
                            </div>
                          </div>
                          <div class="table_item_big">
                            <div class="table_last_con">
                              <div>全程均耗:</div>
                              <div>(dB/{{ "KM" }})</div>
                            </div>
                            <div class="table_right_con">
                              {{ fixFun(uniformLoss, "blank") }}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="right_bottom_right">
                        <div class="left_bottom_con">
                          <div class="table_item_big">
                            <div class="table_left_con border_left">
                              AB 衰耗 (dB):
                            </div>
                            <div class="table_right_con">
                              {{ fixFun(elData.abPadControl, "blank") || 0 }}
                            </div>
                          </div>
                          <div class="table_item_big">
                            <div class="table_left_con border_left">
                              AB 长度:
                              ({{ elData.abLength > 1000 ? "KM" : "M" }})
                            </div>
                            <div class="table_right_con">
                              {{ lengthShowFun(elData.abLength, "blank") || 0 }}
                            </div>
                          </div>
                          <div class="table_item_big">
                            <div class="table_last_con border_left">
                              <div>AB 均耗:</div>
                              <div>(dB/KM)</div>
                            </div>
                            <div class="table_right_con">
                              {{ fixFun(elData.abUniformLoss, "blank") || 0 }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="param_con">
                    <div class="param_result_title">
                      测试参数
                    </div>
                    <div class="flex_con">
                      <div class="param_item_con">
                        <div class="flex_param_con">
                          <div class="flex_title_con">
                            测试量程 (m):
                          </div>
                          <div class="flex_text_con border_right">
                            {{
                              curveData[selectLineed].paramRd == 0
                                ? "自动"
                                : curveData[selectLineed].paramRd
                            }}
                          </div>
                        </div>
                        <div class="flex_param_con">
                          <div class="flex_title_con">
                            测试脉宽 (ns):
                          </div>
                          <div class="flex_text_con border_right">
                            {{
                              curveData[selectLineed].paramPw == 0
                                ? "自动"
                                : curveData[selectLineed].paramPw
                            }}
                          </div>
                        </div>
                        <div class="flex_param_con">
                          <div class="flex_title_con">
                            测试波长 (nm):
                          </div>
                          <div class="flex_text_con border_right">
                            {{ curveData[selectLineed].paramWaveLength }}
                          </div>
                        </div>
                        <div class="flex_param_con">
                          <div class="flex_title_con">
                            折射率:
                          </div>
                          <div class="flex_text_con border_right">
                            {{
                              fixFun(curveData[selectLineed].paramIor, "blank")
                            }}
                          </div>
                        </div>
                      </div>
                      <div class="param_item_con">
                        <div class="flex_param_con">
                          <div class="flex_title_con">
                            回散系数 (dB):
                          </div>
                          <div class="flex_text_con">
                            {{ curveData[selectLineed].paramBackScatter }}
                          </div>
                        </div>
                        <div class="flex_param_con">
                          <div class="flex_title_con">
                            结束门限 (dB):
                          </div>
                          <div class="flex_text_con">
                            {{ curveData[selectLineed].paramFinalThreshold }}
                          </div>
                        </div>
                        <div class="flex_param_con">
                          <div class="flex_title_con">
                            反射门限 (dB):
                          </div>
                          <div class="flex_text_con">
                            {{
                              fixFun(
                                curveData[selectLineed].paramReflectThreshold,
                                "blank"
                              )
                            }}
                          </div>
                        </div>
                        <div class="flex_param_con">
                          <div class="flex_title_con">
                            非反射门限 (dB):
                          </div>
                          <div class="flex_text_con">
                            {{
                              fixFun(
                                curveData[selectLineed]
                                  .paramNonReflectThreshold,
                                "blank"
                              )
                            }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </transition>

              <!-- 曲线列表 -->
              <transition
                name="fade"
                enter-active-class="animate_enter"
                leave-active-class="animate_leave"
              >
                <div class="chart_main_con" v-if="infoIndex === 2">
                  <el-form
                    :model="circuitParams"
                    ref="queryForm"
                    size="small"
                    :inline="true"
                    label-width="80px"
                  >
                    <el-form-item
                      label="设备编号"
                      prop="deviceNo"
                    >
                      <el-input
                        v-model="circuitParams.deviceNo"
                        placeholder="请输入设备编号"
                        clearable
                        @keyup.enter.native="getCircuitList"
                        style="width: 160px"
                      />
                    </el-form-item>
                    <el-form-item
                      label="通 道 号"
                      prop="channel"
                    >
                      <el-input
                        v-model="circuitParams.channel"
                        placeholder="请输入通道号"
                        clearable
                        @keyup.enter.native="getCircuitList"
                        style="width: 160px"
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="getCircuitList"
                      >搜索</el-button
                      >
                    </el-form-item>
                  </el-form>
                  <div class="dia_table_con">
                    <el-table
                      v-loading="loading"
                      :data="circuitList"
                      height="100%"
                    >
                      <el-table-column
                        label="设备编号"
                        align="center"
                        prop="deviceNo"
                      />
                      <el-table-column
                        label="通道号"
                        align="center"
                        prop="channel"
                      />
                      <el-table-column
                        label="操作"
                        align="center"
                        class-name="small-padding fixed-width"
                      >
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-circle-plus-outline"
                            :disabled="isAddCurve(scope.row)"
                            @click="addCurve(scope.row)"
                            v-hasPermi="['base:circuitMeasure:edit']"
                          >添加曲线</el-button
                          >
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <pagination
                    small
                    v-show="circuitTotal > 0"
                    :total="circuitTotal"
                    :page.sync="circuitParams.pageNum"
                    :limit.sync="circuitParams.pageSize"
                    @pagination="getCircuitList"
                  />
                </div>
              </transition>
            </div>
          </div>
          <div class="right_bottom_con">
            <!--当前事件表  -->
            <div class="right_bottom_left">
              <div class="table_title_con">当前事件表</div>
              <div class="table_con">
                <el-table
                  :data="currentEvents[selectLineed]"
                  height="100%"
                  border
                  style="width: 100%"
                  @row-click="currentChange"
                  class="el_table"
                  align="center"
                  header-align="center"
                >
                  <el-table-column
                    prop="type"
                    label="类型"
                    align="center"
                    width="70"
                  >
                    <template slot-scope="scope">
                      <img
                        :src="iconFun(scope.row)"
                        alt=""
                        class="test_img_con"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="index"
                    label="序号"
                    width="70"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="startDist"
                    label="距离 (km)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.startDist) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="insertLoss"
                    label="损耗 (dB)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.insertLoss) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="returnLoss"
                    label="反射率 (dB)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.returnLoss) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="segAvgAtten"
                    label="衰减 (dB/km)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.segAvgAtten) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="segAtten"
                    label="总损耗 (dB)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.segAtten) }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <!-- 参考事件表 -->
            <div class="right_bottom_left">
              <div class="table_title_con">参考事件表</div>
              <div class="table_con">
                <el-table
                  :data="referenceEvents[selectLineed]"
                  height="100%"
                  border
                  style="width: 100%"
                  class="el_table"
                  align="center"
                  header-align="center"
                >
                  <el-table-column
                    prop="type"
                    label="类型"
                    align="center"
                    width="70"
                  >
                    <template slot-scope="scope">
                      <img
                        :src="iconFun(scope.row)"
                        alt=""
                        class="test_img_con"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="index"
                    label="序号"
                    width="70"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="startDist"
                    label="距离 (km)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.startDist) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="insertLoss"
                    label="损耗 (dB)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.insertLoss) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="returnLoss"
                    label="反射率 (dB)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.returnLoss) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="segAvgAtten"
                    label="衰减 (dB/km)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.segAvgAtten) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="segAtten"
                    label="总损耗 (dB)"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span>{{ fixFun(scope.row.segAtten) }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导出 -->
    <div id="print">
      <div class="right_con">
        <div class="right_top_con">
          <div class="right_chart_top_con">
            <div class="device_info_con">多曲线查看</div>
          </div>
        </div>
        <div class="echart_dia_con">
          <div class="alert_main_con">
            <div class="echart_info_main_con">
              <div class="echart_main echart_height">
                <multitermlineChart
                  :lineChartData="lineChartData"
                  :currentEvents="currentEvents"
                  :selectLineed="selectLineed"
                  :addType="addType"
                  ref="multitermlineChart"
                ></multitermlineChart>
              </div>
            </div>
            <div class="right_bottom_con">
              <!--当前事件表  -->
              <div class="right_bottom_left">
                <div class="table_title_con">当前事件表</div>
                <div class="table_con">
                  <el-table
                    :data="currentEvents[selectLineed]"
                    :height="tableHeight"
                    border
                    style="width: 100%"
                    @row-click="currentChange"
                    class="el_table"
                    align="center"
                    header-align="center"
                  >
                    <el-table-column
                      prop="type"
                      label="类型"
                      align="center"
                      width="70"
                    >
                      <template slot-scope="scope">
                        <img
                          :src="iconFun(scope.row)"
                          alt=""
                          class="test_img_con"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="index"
                      label="序号"
                      width="70"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="startDist"
                      label="距离 (km)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.startDist) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="insertLoss"
                      label="损耗 (dB)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.insertLoss) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="returnLoss"
                      label="反射率 (dB)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.returnLoss) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="segAvgAtten"
                      label="衰减 (dB/km)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.segAvgAtten) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="segAtten"
                      label="总损耗 (dB)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.segAtten) }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <!-- 参考事件表 -->
              <div class="right_bottom_left">
                <div class="table_title_con">
                  参考事件表
                </div>
                <div class="table_con">
                  <el-table
                    :data="referenceEvents[selectLineed]"
                    :height="tableHeight"
                    border
                    style="width: 100%"
                    class="el_table"
                    align="center"
                    header-align="center"
                  >
                    <el-table-column
                      prop="type"
                      label="类型"
                      align="center"
                      width="70"
                    >
                      <template slot-scope="scope">
                        <img
                          :src="iconFun(scope.row)"
                          alt=""
                          class="test_img_con"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="index"
                      label="序号"
                      width="70"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="startDist"
                      label="距离 (km)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.startDist) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="insertLoss"
                      label="损耗 (dB)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.insertLoss) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="returnLoss"
                      label="反射率 (dB)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.returnLoss) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="segAvgAtten"
                      label="衰减 (dB/km)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.segAvgAtten) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="segAtten"
                      label="总损耗 (dB)"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ fixFun(scope.row.segAtten) }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pako from "pako";

import startTest from "@/assets/images/device/startTest.png";
import endTest from "@/assets/images/device/endTest.png";
import gainTest from "@/assets/images/device/gainTest.png";
import dampingTest from "@/assets/images/device/dampingTest.png";
import reflectTest from "@/assets/images/device/reflectTest.png";
import sectionTest from "@/assets/images/device/sectionTest.png";

import multitermlineChart from "../../components/echarts/multitermlineChart";
import Export from "@/utils/exportPdf"; // 导出
import "@/assets/styles/doExport.css";
import {
  listCircuitMeasure,
  getCircuitMeasure,
  viewCurve,
  getDefaultMeasure,
} from "@/api/base/circuitMeasure";
let colorList = [
  "blue",
  "green",
  "red",
  "#735799",
  "#f23350",
  "#46ea91",
  "#2ba0ff",
  "#ed593b",
  "#7357ff",
  "#f2d750",
];
export default {
  name: "lookCurve",
  dicts: [
    "otu_measure_type",
    "otu_circuit_status",
    "otu_measure_status",
    "otu_yes_no",
  ],
  components: { multitermlineChart },
  data() {
    return {
      // 遮罩层
      loading: true,
      lineChartData: [], //折线图数据
      curveData: [], //选择的曲线的数据
      currentEvents: [], //当前曲线的事件 ,表格的数据
      referenceEvents: [], //参考曲线的事件
      infoIndex: 0, //查看曲线时候 选择的按钮
      currentCircuitInfo: {}, //当前显示的光路信息
      circuitTotal: 0, //弹框的光路总数
      circuitList: [], //弹框的光路表
      circuitParams: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      selectLineed: 0, // 当前是第几条曲线
      addType: "", //曲线的添加方式,  是查看还是添加
      uniformLoss: 0, //全程衰耗
      elData: {
        abLength: 0,
        abPadControl: 0,
        abUniformLoss: 0,
      },
      dataZoomVis: true, //重置缩放的按钮
      aLineShow: true,
      bLineShow: true, ///a b线如果在视野外, 则可操作按钮, 操作后ab线可见
      tableHeight: 0, //table pdf的高度
    };
  },
  created: function () {
    // this.getCircuitMeasure();
    this.getCircuitList();
  },
  activated() {
    let storeMeasureId = this.$store.getters.measureId;
    if (storeMeasureId !== this.$route.query.measureId) {
      //如果变了, 需要重新请求接口获取曲线信息, 并且清空echarts
      if (storeMeasureId) {
        this.$refs.multitermlineChart.clearOption();
      }
      this.$store.dispatch("app/setMeasureId", this.$route.query.measureId);
      this.getCircuitMeasure();
    }
  },
  deactivated() {},
  beforeDestroy() {},

  methods: {
    ablineFun(type, value) {
      //a b线如果在视野外面, 可以操作 ,回到视野
      if (type === "a") {
        this.aLineShow = value;
      } else {
        this.bLineShow = value;
      }
    },
    dataZoomFun(val) {
      //重置缩放是否可以点击
      this.dataZoomVis = val;
    },
    recoveryRatio() {
      //echarts 恢复比例
      this.$refs.multitermlineChart.recoveryRatio();
    },
    showLine(type) {
      //显示a b线
      let that = this;
      if (type === "a") {
        // this.startPoint = this.$refs.multitermlineChart.aPoint;
        this.$refs.multitermlineChart.posiLineFun("a");
        // this.abCalcFun(this.startPoint, this.endPoint);
        this.aLineShow = true;
      } else {
        // this.endPoint = this.$refs.multitermlineChart.bPoint;
        // this.abCalcFun(this.startPoint, this.endPoint);
        this.$refs.multitermlineChart.posiLineFun("b");
        this.bLineShow = true;
      }
    },
    getCircuitMeasure() {
      //查询曲线详情
      let that = this;
      getCircuitMeasure(that.$route.query.measureId).then((res) => {
        that.curveData = [];
        that.curveData.push(res.data);
      });
      this.lookCurve();
    },
    // 辅助函数：生成指定数量的数据点
    generateData(xValue, yValue) {
      const data = [];
      for (let i = 0; i < xValue.length; i++) {
        const x = xValue[i];
        const y = yValue[i];
        data.push([x, y]); // 使用 [x, y] 数组格式
      }
      return data;
    },
    calcTableHeihtFun() {
      let that = this;
      let referLen = that.referenceEvents[that.selectLineed].length;
      let currentLen = that.currentEvents[that.selectLineed].length;
      that.tableHeight =
        referLen > currentLen
          ? referLen * 44 + 44 + "px"
          : currentLen * 44 + 44 + "px";
      console.log("that.tableHeight", that.tableHeight);
    },
    lookCurve(e) {
      //查看曲线
      let that = this;
      that.$modal.loading("请求数据中，请稍候...");
      viewCurve(that.$route.query.measureId)
        .then((res) => {
          that.$modal.closeLoading();
          that.lineChartData = [];
          that.currentEvents = [];
          that.referenceEvents = [];
          let currentMidtable = []; //当前事件表, 中间过度数组
          for (let i = 0; i < res.data.length; i++) {
            let obj = {};
            let bigPkp = 0; //记录最大的pkp值
            // let jsonData = JSON.parse(res.data[i].jsonData);
            // let { PKP, point_cnt } = jsonData;
            const [x, yData] = res.data[i].tracedata.reduce(
              ([xArr, yArr], item) => {
                try {
                  // 确保 item 是字符串，再按 \t 分割
                  const parts = String(item).split("\t");
                  if (parts.length >= 2) {
                    const xVal = Number(parts[0])*1000;
                    const yVal = Number(parts[1]);
                    // 只有是有效数字时才 push
                    if (!isNaN(xVal)) xArr.push(xVal);
                    if (!isNaN(yVal)) yArr.push(yVal);
                  } else {
                    console.warn("Invalid item format (missing tab):", item);
                  }
                } catch (error) {
                  console.error("Error processing item:", item, error);
                }
                return [xArr, yArr];
              },
              [[], []] // 初始值
            );
            let xData = [];
            let PKP = res.data[i].PKP*1000;
            if (PKP > bigPkp) {
              bigPkp = PKP;
              xData = x;
            }
            // let objdata = that.pako_unzip(jsonData.wave);


            obj.name = that.formatDate(res.data[i].createTime);
            obj.id = that.formatDate(res.data[i].createTime);
            obj.xData = xData;
            obj.color = colorList[i];
            obj.offset = 1;
            obj.data = that.generateData(obj.xData, yData);
            that.lineChartData.push(obj);
            res.data[i].events[0].color = obj.color;

            let midArrOne = res.data[i].events;
            let segAttenShow = 0;
            let typeCurrent = 10000;
            for (let i = 0; i < midArrOne.length; i++) {
              if (i === 0) {
                segAttenShow = 0;
              } else {
                if (midArrOne[i].type === 2) {
                  typeCurrent = i;
                  if (
                    !midArrOne[i].insertLoss ||
                    midArrOne[i].insertLoss === "null"
                  ) {
                    segAttenShow = objOne.segAtten;
                  } else {
                    segAttenShow = midArrOne[i].insertLoss + objOne.segAtten;
                  }
                } else if (i > typeCurrent) {
                  segAttenShow = "-";
                } else {
                  if (
                    !midArrOne[i].insertLoss ||
                    midArrOne[i].insertLoss === "null"
                  ) {
                    segAttenShow = objOne.segAtten;
                  } else {
                    segAttenShow = midArrOne[i].insertLoss + objOne.segAtten;
                  }
                }
                if (i > typeCurrent) {
                  midArrOne[i].returnLoss = "-";
                }
              }
              midArrOne[i].segAtten = segAttenShow;
              midArrOne[i].segAvgAtten = "-"; //是衰减的显示
              currentMidtable.push(midArrOne[i]);
              if (i !== midArrOne.length - 1) {
                let segAttenMid = 0;
                if (i >= typeCurrent) {
                  segAttenMid = "-";
                } else {
                  segAttenMid =
                    midArrOne[i].segAtten + midArrOne[i + 1].segAtten;
                }
                var objOne = {
                  type: 9,
                  current: i * 2 + 1,
                  startLocation: midArrOne[i].startLocation,
                  index: "-",
                  startDist:
                    midArrOne[i + 1].startDist - midArrOne[i].startDist,
                  insertLoss: midArrOne[i + 1].segAtten,
                  returnLoss: "-",
                  segAvgAtten: midArrOne[i + 1].segAvgAtten,
                  segAtten: segAttenMid,
                };
                currentMidtable.push(objOne);
              }
            }
            that.currentEvents.push(currentMidtable);
            that.addType = "look";
            that.calcUniformLoss();
            that.getDefaultMeasure(that.$route.query.measureId);
          }
          that.calcTableHeihtFun();
        })
        .catch((err) => {
          this.$modal.closeLoading();
        });
    },
    colorShowFun() {
      let that = this;
      let colorMid = colorList.filter((item) => {
        return item === colorList[that.lineChartData.length];
      });
      if (colorMid.length > 0) {
        //颜色已经重复了
        let uniqueValues = colorList.filter(
          (value) => !that.lineChartData.some((obj) => obj.color === value)
        );
        return uniqueValues[0];
      } else {
        return colorList[that.lineChartData.length];
      }
    },
    calcUniformLoss() {
      //计算全程均耗
      let that = this;
      let startLen = 0;
      let endLen = 0;
      let startLevel = 0;
      let endLevel = 0;
      let arr = that.currentEvents[that.selectLineed];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].type === 1) {
          //起始
          startLen = arr[i].startDist;
          startLevel = arr[i].startLevel;
        }
        if (arr[i].type === 2) {
          //终点
          endLen = arr[i].startDist;
          endLevel = arr[i].startLevel;
        }
      }
      let wholeLevel = startLevel - endLevel;
      let wholeLen = that.curveData[that.selectLineed].wholeLen;
      if (endLen - startLen === 0) {
        that.uniformLoss = 0;
      } else {
        that.uniformLoss = (
          wholeLevel / (wholeLen > 1000 ? wholeLen / 1000 : wholeLen)
        ).toFixed(3);
      }
    },
    addCurve(e) {
      //添加曲线
      let that = this;
      const measureIds = e.measureId;
      that.curveData.push(e);
      that.$modal.loading("请求数据中，请稍候...");
      viewCurve(measureIds)
        .then((res) => {
          that.$modal.closeLoading();
          for (let i = 0; i < res.data.length; i++) {
            let obj = {};
            let bigPkp = 0; //记录最大的pkp值
            // let jsonData = JSON.parse(res.data[i].jsonData);
            // let { PKP, point_cnt } = jsonData;
            // let xData = [];
            // if (PKP > bigPkp) {
            //   xData = [];
            //   bigPkp = PKP;
            //   for (let i = 0; i < point_cnt * PKP; i += PKP) {
            //     xData.push(i);
            //   }
            // }
            // let yData = that.pako_unzip(jsonData.wave);

            const [x, yData] = res.data[i].tracedata.reduce(
              ([xArr, yArr], item) => {
                try {
                  // 确保 item 是字符串，再按 \t 分割
                  const parts = String(item).split("\t");
                  if (parts.length >= 2) {
                    const xVal = Number(parts[0])*1000;
                    const yVal = Number(parts[1]);
                    // 只有是有效数字时才 push
                    if (!isNaN(xVal)) xArr.push(xVal);
                    if (!isNaN(yVal)) yArr.push(yVal);
                  } else {
                    console.warn("Invalid item format (missing tab):", item);
                  }
                } catch (error) {
                  console.error("Error processing item:", item, error);
                }
                return [xArr, yArr];
              },
              [[], []] // 初始值
            );
            let xData = [];
            let PKP = res.data[i].PKP*1000;
            if (PKP > bigPkp) {
              bigPkp = PKP;
              xData = x;
            }
            obj.name = that.formatDate(res.data[i].createTime);
            obj.id = that.formatDate(res.data[i].createTime);
            obj.xData = xData;
            obj.color = that.colorShowFun();
            obj.offset = 1;
            obj.data = that.generateData(obj.xData, yData);
            that.lineChartData.push(obj);
            res.data[i].events[0].color = obj.color;

            let midArrOne = res.data[i].events;
            let segAttenShow = 0;
            let typeCurrent = 10000;
            let currentMidtable = [];
            for (let i = 0; i < midArrOne.length; i++) {
              if (i === 0) {
                segAttenShow = 0;
              } else {
                if (midArrOne[i].type === 2) {
                  typeCurrent = i;
                  if (
                    !midArrOne[i].insertLoss ||
                    midArrOne[i].insertLoss === "null"
                  ) {
                    segAttenShow = objOne.segAtten;
                  } else {
                    segAttenShow = midArrOne[i].insertLoss + objOne.segAtten;
                  }
                } else if (i > typeCurrent) {
                  segAttenShow = "-";
                } else {
                  if (
                    !midArrOne[i].insertLoss ||
                    midArrOne[i].insertLoss === "null"
                  ) {
                    segAttenShow = objOne.segAtten;
                  } else {
                    segAttenShow = midArrOne[i].insertLoss + objOne.segAtten;
                  }
                }
                if (i > typeCurrent) {
                  midArrOne[i].returnLoss = "-";
                }
              }

              midArrOne[i].segAtten = segAttenShow;
              midArrOne[i].segAvgAtten = "-"; //是衰减的显示
              currentMidtable.push(midArrOne[i]);
              if (i !== midArrOne.length - 1) {
                let segAttenMid = 0;
                if (i >= typeCurrent) {
                  segAttenMid = "-";
                } else {
                  segAttenMid =
                    midArrOne[i].segAtten + midArrOne[i + 1].segAtten;
                }
                var objOne = {
                  type: 9,
                  current: i * 2 + 1,
                  startLocation: midArrOne[i].startLocation,
                  index: "-",
                  startDist:
                    midArrOne[i + 1].startDist - midArrOne[i].startDist,
                  insertLoss: midArrOne[i + 1].segAtten,
                  returnLoss: "-",
                  segAvgAtten: midArrOne[i + 1].segAvgAtten,
                  segAtten: segAttenMid,
                };
                currentMidtable.push(objOne);
              }
            }
            // that.currentEvents.push(res.data[i].events);
            that.currentEvents.push(currentMidtable);
            that.addType = "add";
            that.getDefaultMeasure(measureIds);
          }
        })
        .catch((err) => {
          this.$modal.closeLoading();
        });
    },
    getDefaultMeasure(measureIds) {
      //制作参考事件表格
      let that = this;
      getDefaultMeasure(measureIds).then((res) => {
        let defMidtable = [];
        if (res?.data?.events?.length) {
          let midArrOne = res.data.events;
          let segAttenShow = 0;
          let typeCurrent = 10000;
          for (let i = 0; i < midArrOne.length; i++) {
            if (i === 0) {
              segAttenShow = 0;
            } else {
              if (midArrOne[i].type === 2) {
                typeCurrent = i;
                if (
                  !midArrOne[i].insertLoss ||
                  midArrOne[i].insertLoss === "null"
                ) {
                  segAttenShow = objOne.segAtten;
                } else {
                  segAttenShow = midArrOne[i].insertLoss + objOne.segAtten;
                }
              } else if (i > typeCurrent) {
                segAttenShow = "-";
              } else {
                if (
                  !midArrOne[i].insertLoss ||
                  midArrOne[i].insertLoss === "null"
                ) {
                  segAttenShow = objOne.segAtten;
                } else {
                  segAttenShow = midArrOne[i].insertLoss + objOne.segAtten;
                }
              }
              if (i > typeCurrent) {
                midArrOne[i].returnLoss = "-";
              }
            }
            midArrOne[i].segAtten = segAttenShow;
            midArrOne[i].segAvgAtten = "-"; //是衰减的显示
            defMidtable.push(midArrOne[i]);
            if (i !== midArrOne.length - 1) {
              let segAttenMid = 0;
              if (i >= typeCurrent) {
                segAttenMid = "-";
              } else {
                segAttenMid = midArrOne[i].segAtten + midArrOne[i + 1].segAtten;
              }
              var objOne = {
                type: 9,
                current: i * 2 + 1,
                startLocation: midArrOne[i].startLocation,
                index: "-",
                startDist: midArrOne[i + 1].startDist - midArrOne[i].startDist,
                insertLoss: midArrOne[i + 1].segAtten,
                returnLoss: "-",
                segAvgAtten: midArrOne[i + 1].segAvgAtten,
                segAtten: segAttenMid,
              };
              defMidtable.push(objOne);
            }
          }
          that.referenceEvents.push(defMidtable);
        } else {
          that.referenceEvents.push(defMidtable);
        }
        that.calcTableHeihtFun();
      });
    },
    // 格式化日期格式如：2017-9-19 18:04:33
    formatDate(value) {
      // 计算日期相关值
      const date = new Date(value);
      // 使用 toLocaleString 并指定格式
      const formattedDate = date.toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false, // 使用 24 小时制
      });
      //去掉斜杠，可以使用 replace 方法
      const finalFormattedDate = formattedDate.replace(/\//g, "-");
      return finalFormattedDate;
    },
    projectClose() {
      this.lineChartData = [];
      this.showChart = false;
    },
    pako_unzip(data) {
      // pako解压
      let charData = atob(data)
        .split("")
        .map(function (x) {
          return x.charCodeAt(0);
        });
      let binData = new Uint8Array(charData);
      let str = pako.inflate(binData, { to: "string" });
      const chunks = str.match(/.{1,4}/g) || []; // 使用正则表达式来匹配每四个字符
      const decimalValues = chunks.map((hex) => {
        // 将十六进制字符串转换为十进制数字
        const decimal = parseInt(hex, 16);
        return decimal;
      });
      let midArr = [];
      decimalValues.forEach((e) => {
        midArr.push(e / 1000); //将值除以 1000
      });
      return midArr;
    },
    lengthShowFun(e, type) {
      //长度显示, 1000以上是km ,以下是m
      if (e > 1000) {
        return this.fixFun(e / 1000, type);
      } else {
        return this.fixFun(e, type);
      }
    },
    fixFun(e, type) {
      if (!e && type === "blank") {
        return "";
      } else if (!e && e != 0) {
        return "-";
      } else if (e == 0) {
        return e;
      } else if (e == "-") {
        return "-";
      } else if (e == "null") {
        return "-";
      } else if (e == "-null") {
        return "-";
      } else {
        let num = parseFloat(e);
        let strData = num.toString();
        let splitData = strData.split(".");
        if (num % 1 === 0) {
          return num;
        } else if (splitData.length > 0) {
          if (splitData[1].length >= 4) {
            return parseFloat(num.toFixed(4));
          } else if (splitData[1].length === 3) {
            return parseFloat(num.toFixed(3));
          } else if (splitData[1].length === 2) {
            return parseFloat(num.toFixed(2));
          } else if (splitData[1].length === 1) {
            return parseFloat(num.toFixed(1));
          } else {
            return parseFloat(num);
          }
        } else {
          return num;
        }
      }
    },
    iconFun(e) {
      //表格显示图标
      if (e.type == 1) {
        return startTest;
      } else if (e.type == 2) {
        return endTest;
      } else if (e.type == 3) {
        return reflectTest;
      } else if (e.type == 4) {
        return dampingTest;
      } else if (e.type == 5) {
        return gainTest;
      } else {
        return sectionTest;
      }
    },
    deleteLine(index) {
      //删除曲线  addType
      let that = this;
      that.addType = "delete";
      that.lineChartData.splice(index, 1);
      that.currentEvents.splice(index, 1);
    },
    selectInfoIdx(e) {
      //查看曲线 , 按钮的选择
      if (this.infoIndex === e) {
        this.infoIndex = 0;
      } else {
        this.infoIndex = e;
      }
    },
    /** 查询光路监测列表 */
    getCircuitList() {
      this.loading = true;
      listCircuitMeasure(this.circuitParams).then((response) => {
        this.circuitList = response.rows;
        this.circuitTotal = response.total;
        this.loading = false;
      });
    },
    selectLineFun(index) {
      //选择了 第几条曲线
      this.selectLineed = index;
      this.calcTableHeihtFun();
      this.calcUniformLoss();
    },
    //计算AB线的数据
    abCalcFun(adata, bdata) {
      let abLength = Math.abs(bdata.x - adata.x);
      let abPadControl = bdata.y - adata.y;
      this.elData.abLength = abLength;
      this.elData.abPadControl = abPadControl;
      this.elData.abUniformLoss =
        this.elData.abPadControl /
        (this.elData.abLength > 1000
          ? this.elData.abLength / 1000
          : this.elData.abLength);
      this.$forceUpdate();
    },
    isAddCurve(item) {
      //是否可以添加曲线
      if (this.lineChartData.length >= 10) {
        return true;
      }
      for (let i = 0; i < this.lineChartData.length; i++) {
        if (this.lineChartData[i].name === item.createTime) {
          return true;
        }
      }
    },
    currentChange(e) {
      //点击表格
      console.log("eeeeeeeeeeee,", e);
    },
    returnFun() {
      //返回上一页
      this.$router.go(-1);
    },
    doExport() {
      Export(document.getElementById("print"), `曲线查看.pdf`);
    },
  },
};
</script>


<style lang="scss" scoped>
.dashboard_editor_container {
  padding: 20px;
  background-size: 100% 100%;
  position: relative;
  width: 100%;
  height: calc(100vh - 85px);
  box-sizing: border-box;
  .right_con {
    // width: calc(100% - 320px);
    width: 100%;
    height: 100%;
    .right_top_con {
      height: 60px;
      width: 100%;
      // border: #dfe6ec 1px solid;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .chart_tow_top_con {
        width: 100%;
        display: flex;
        justify-content: center;
        border-top: 1px solid #dfe6ec;
        box-sizing: border-box;
        height: 55px;
      }
      .right_chart_top_con {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        height: 50px;
        .device_info_con {
          display: flex;
          color: #1890ff;
          font-size: 16px;
          height: 100%;
          align-items: center;
          font-weight: 600;
        }
        .return_con {
          padding: 10px;
        }
      }
      .chart_con {
        height: calc(100% - 110px);
        width: 100%;
        border-top: 1px solid #dfe6ec;
        box-sizing: border-box;
      }
    }
    .right_bottom_con {
      width: 100%;
      height: 23%;
      display: flex;
      justify-content: space-between;
      .text_result_con {
        width: 22%;
        min-width: 320px;
        height: 100%;
        box-sizing: border-box;
        border: #dfe6ec 1px solid;
      }
      .right_bottom_right {
        width: 50%;
        height: 100%;
        color: #606266;
        background-color: #fff;
      }
    }
  }
}
.echart_dia_con {
  width: 100%;
  height: calc(100% - 40px);
  padding: 0 10px 15px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  .alert_main_con {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ccc;
  }
}
.alert_title_con {
  width: 100%;
  height: 9%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  .alert_left_con {
    width: 100px;
  }
  .alert_mid_con {
    display: flex;
    color: #1890ff;
    font-size: 16px;
    height: 100%;
    align-items: center;
    font-weight: 600;
  }
  .cancel_con {
    font-size: 16px;
    cursor: pointer;
  }
}
.echart_info_main_con {
  width: 100%;
  height: 76%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  .echart_main {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  .echart_height {
    height: 50vh;
  }
  .abline_button_con {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 200px;
    position: absolute;
    top: 10px;
    width: 200px;
    left: calc(50% - 100px);
    z-index: 100;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .echart_info_con {
    position: absolute;
    top: 10px;
    right: 0;
    width: 25%;
    // border: 1px solid #dfe6ec;
    box-sizing: border-box;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0);
    z-index: 100;
    .chart_top_info {
      width: 100%;
      height: 35px;
      display: flex;
      align-content: center;
      justify-content: right;
      .top_button_con {
        width: 33%;
        height: 35px;
        background: #fff;
        // color: #1890ff;
        line-height: 35px;
        text-align: center;
        color: #1890ff;
        border: 1px solid rgba(24, 144, 255, 0.5);
        cursor: pointer;
        border-radius: 4px;
      }
      .top_button_select_con {
        width: 33%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;
        background: #1890ff;
        color: #fff;
        border-radius: 4px;
      }
    }
    .chart_main_con {
      width: 100%;
      height: 490px;
      border: 1px solid #ccc;
      padding: 5px;
      box-sizing: border-box;
      overflow-y: scroll;
      background: rgba(255, 255, 255, 1);
      .dia_table_con {
        height: calc(90% - 55px);
        width: 100%;
      }
      .map_dia_con {
        width: 100%;
        height: calc(100%);
      }
      .circuit_info_title_con {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        height: 40px;

        .circuit_info_left {
          width: 60px;
        }
        .circuit_info_right {
          width: calc(100%-65px);
          color: #1890ff;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
.right_bottom_con {
  width: 100%;
  height: 23%;
  display: flex;
  justify-content: space-between;
}
.right_bottom_right {
  width: 50%;
  height: 100%;
  color: #606266;
  background-color: #fff;
}
.flex_con {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  min-width: 320px;
  height: calc(100% - 40px);
  padding: 0;
}
.param_result_title {
  width: 100%;
  height: 40px;
  background: rgba(30, 121, 186, 0.7);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
}
.table_item_con {
  display: flex;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}
.table_item_big {
  display: flex;
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  border-top: 1px solid #dfe6ec;
}
.table_left_con {
  width: 105px;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-right: 5px;
  justify-content: center;
  border-right: 1px solid #dfe6ec;
  font-weight: 600;
  color: #606266;
}
.border_left {
  border-left: 1px solid #dfe6ec;
}
.table_last_con {
  width: 105px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding-right: 5px;
  justify-content: center;
  border-right: 1px solid #dfe6ec;
  font-weight: 600;
  color: #606266;
}
.table_right_con {
  width: calc(100% - 105px);
  display: flex;
  align-items: center;
  padding-left: 5px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  justify-content: center;
}
.param_con {
  width: 100%;
  min-width: 320px;
  border: 1px solid #dfe6ec;
  border-radius: 3px;
  color: #606266;
  background: #fff;
  // padding: 5px 0;
  .param_item_con {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .flex_param_con {
      display: flex;
      align-items: center;
      font-size: 13px;
      height: 50px;
      border-top: 1px solid #dfe6ec;
      .flex_title_con {
        padding: 0 5px;
        width: 55%;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-right: 1px solid #dfe6ec;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #606266;
        font-weight: 600;
      }
      .flex_text_con {
        padding: 0 5px;
        width: 45%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .border_right {
        border-right: 1px solid #dfe6ec;
      }
    }
  }
}
.right_bottom_left {
  width: 49.5%;
  height: 100%;
  border: #dfe6ec 1px solid;
  box-sizing: border-box;
  .table_title_con {
    width: 100%;
    background: #ccc;
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    font-weight: 600;
    letter-spacing: 1px;
  }
  .table_con {
    height: calc(100% - 35px);
  }
  .el_table {
    cursor: pointer;
  }
  ::v-deep.el_table th.el-table__cell {
    background-color: rgba(30, 121, 186, 0.7) !important;
    color: #fff;
  }
  ::v-deep.el-table--medium .el-table__cell {
    padding: 3px 0 !important;
  }
  ::v-deep.el-table_1_column_1 {
    padding: 0 !important;
  }
}
.test_img_con {
  width: 30px;
  height: 30px;
}
.reference_con {
  margin-left: 10px;
}
/* 定义进入和离开的过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease; /* 过渡时间为0.5秒 */
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
